<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <div class="box-f-form">
      <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
        <el-col :span="24">
          <el-form-item label="仓库名">
            <el-input v-model="model.Tablename" :disabled="TablenameDisabled" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col v-for="(item,index) in 18" :key="index" :span="12">
          <el-form-item :label="getLabel(index)">
            <el-input v-model="model[`Table${index+1}`]" type="textarea" rows="3" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="drawer-footer">
      <div class="drawer-footer-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
import { apiGetOneWarehouse } from '@/api/GeneralDatabase'

export default {
  components: {},
  props: {},
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      TablenameDisabled: false,
      visible: false,
      disableSubmit: false,
      title: '',
      size: '50%',
      lieNamrArr: [],
      rules: {
        column1: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      url: {
        add: 'DataWarehouse.aspx?action=Insert',
        edit: 'DataWarehouse.aspx?action=Update'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 列名
    getLabel(val) {
      return `列${val + 1}`
    },
    add() {
      this.updateState = 'add'
      this.TablenameDisabled = false
      this.visible = true
      this.model = {}
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
      // this.lieNamrArr = [
      //   { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' },
      //   { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }, { Table1: '' }
      // ]
      for (let index = 0; index < 18; index++) {
        this.$set(this.model, `Table${index + 1}`, '')
      }
    },
    edit(rowData) {
      this.updateState = 'edit'
      this.TablenameDisabled = true
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.getDeatils(rowData.id)
      console.log('rowData', rowData)
      this.$forceUpdate()
    },
    getDeatils(id) {
      this.$store.dispatch('app/setLoading', true)
      apiGetOneWarehouse({ id }).then(res => {
        console.log('res', res)
        if (res.code === 1) {
          this.model = res.data
        } else {
          this.$message.warning(res.message)
        }
      }).catch((res) => {
        this.$message.error(res.message)
      }).finally(res => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    submitForm() {
      console.log('表单数据', this.model)
      const that = this
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          let httpurl = ''
          let method = ''
          if (that.updateState === 'add') {
            httpurl = that.url.add
            method = 'post'
          } else if (that.updateState === 'edit') {
            httpurl = that.url.edit
            method = 'post'
          } else {
            that.$message.warning('更新标识无效')
            return
          }
          this.$store.dispatch('app/setLoading', true)
          httpAction(httpurl, that.model, method).then((res) => {
            if (res.code === 1) {
              that.modelClose()
              that.$message.success(res.message || '操作成功！')
              that.$emit('ok')
            } else {
              that.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 20px 30px 0px;
  margin-bottom: 90px;
  // height: 1250px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
  .box-f-form{
    margin-bottom: 90px;
    border: 1px red solid;
  }
}
.el-col{
  padding: 0 8px;
}
.drawer-footer{
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:65px;
  background:#fff;
  z-index:999;
  padding: 16px 29px;
  box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}
// 内容超长启用滚动条
::v-deep .el-drawer__body {
    overflow: auto;
    margin-bottom: 60px;
}
</style>
